.tzy-login-box{
    width: 100%;
    height: 100%;
    min-height: 500px;
    padding: .4rem 0;
    // background-image: radial-gradient(circle at -3.1% -4.3%, rgb(57, 255, 186) 0%, rgb(21, 38, 82) 90%);
    // background-image: radial-gradient(circle at -4% -12.9%, rgb(74, 98, 110) 0.3%, rgb(30, 33, 48) 90.2%);
    background: url("~@/assets/login_bg.jpg") no-repeat, rgba(5,25,49,1);
    background-size: cover;
    background-attachment: fixed;
    @include flexLayout(flex,center,center);
    position: relative;
    .tzy-lb__form-logo{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 20;
        width: .7rem;
        height: .7rem;
        transform: translate(-50%,-3rem);
        opacity: 0;
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: opacity, transform;
        img{
            display: inline-block;
            border-radius: 100%;
            overflow: hidden;
        }
        .tzy-lb__form-logo-line-right,
        .tzy-lb__form-logo-line-left{
            width: .9rem;
            height: .01rem;
            background-color: rgba(123, 165, 232, 1);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-155%,-50%);
            z-index: 2;
            opacity: 0;
            transition-duration: $default-transition-duration;
            transition-timing-function: $default-transition-timing;
            transition-property: opacity,transform;
            &::after{
                content: "";
                display: block;
                width: .04rem;
                height: .04rem;
                border-radius: 100%;
                background-color: rgba(123, 165, 232, .6);
                position: absolute;
                top: 50%;
                transform: translate(.04rem,-60%);
                right: 0;
            }
        }
        .tzy-lb__form-logo-line-right{
            left: auto;
            right: 0;
            transform: translate(155%,-50%);
            &::after{
                right: auto;
                left: 0;
                transform: translate(-.04rem,-60%);
            }
        }
    }
    .tzy-lb__box{
        width: 4.4rem;
        height: 3.2rem;
        background-color: map-get($login-bg,300);
        border-radius: .06rem;
        overflow: hidden;
        padding: .12rem .14rem;
        box-shadow: 0 .02rem .12rem rgba($login-shadow, .5);
        opacity: 0;
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: opacity;
        position: relative;
    }
    .cf__group-info-icon{
        width: .44rem;
        height: 100%;
        &.user{
            background: url("~@/assets/login_user.png") no-repeat, transparent;
            background-size: auto 50%;
            background-position: right center;
        }
        &.pass{
            background: url("~@/assets/login_pass.png") no-repeat, transparent;
            background-size: auto 50%;
            background-position: right center;
        }
    }
    .tzy-lb__title{
        color: $primary--color-0-1;
        font-size: .24rem;
        white-space: nowrap;
        text-align: center;
        padding: .14rem 0;
        opacity: 0;
        transform: translateY(-.2rem);
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: transform, opacity;
    }
    .tzy-lb__form{
        opacity: 0;
        transform: translateY(.2rem);
        transition-duration: $default-transition-duration;
        transition-timing-function: $default-transition-timing;
        transition-property: transform, opacity;
        .tzy-lb__form-box{
            padding: .12rem .14rem;
        }
        .captcha-box{
            width: 1.4rem;
            height: .4rem;
            margin-left: .2rem;
            min-width: 140px;
            min-height: 40px;
            border-radius: .04rem;
            overflow: hidden;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tzy-lb__form-btn{
            width: 100%;
        }
    }
    &.enter{
        .tzy-lb__form-logo{
            transition-delay: 100ms;
            transform: translate(-50%,-2.6rem);
            opacity: 1;
            .tzy-lb__form-logo-line-right{
                transition-delay: 500ms;
                opacity: 1;
                transform: translate(115%,-50%);
            }
            .tzy-lb__form-logo-line-left{
                transition-delay: 500ms;
                opacity: 1;
                transform: translate(-115%,-50%);
            }
        }

        .tzy-lb__box{
            opacity: 1;
        }
        .tzy-lb__title,
        .tzy-lb__form{
            transition-delay: 200ms;
            opacity: 1;
            transform: translateY(0);
        }
    }
}